// 1. 初始化渲染
const renderList = async () => {
  const res = await axios.get("/students");
  const html = res.data
    .map((item, i) => {
      return `
        <tr>
          <td>${item.name}</td>
          <td>${item.age}</td>
          <td>${item.gender === 0 ? "男" : "女"}</td>
          <td>第${item.group}组</td>
          <td>${item.hope_salary}</td>
          <td>${item.salary}</td>
          <td>${item.province} ${item.city} ${item.area}</td>
          <td>
            <a href="javascript:;" class="text-success mr-3"><i data-id=${
              item.id
            } class="bi bi-pen"></i></a>
            <a href="javascript:;" class="text-danger"><i data-id=${
              item.id
            } class="bi bi-trash"></i></a>
          </td>
        </tr>
      `;
    })
    .join("");
  document.querySelector(".list").innerHTML = html;
  document.querySelector(".total").innerHTML = res.data.length;
};
renderList();

// 初始化模态框 & 城市选择
// bootstrap的模态框直接cv即可
const modalBox = document.querySelector("#modal");
const modal = new bootstrap.Modal(modalBox);
const ps = document.querySelector("[name=province]");
const cs = document.querySelector("[name=city]");
const as = document.querySelector("[name=area]");


const initCity = async () => {
  // 显示省市区
  const { data: province } = await axios.get("/api/province");
  const phtml = province
    .map((item) => `<option value="${item}">${item}</option>`)
    .join("");
  ps.innerHTML = `<option value="">--省份--</option>${phtml}`;
  // 省市区联动
  ps.addEventListener("change", async () => {
    cs.value = "";
    as.value = "";
    const { data: city } = await axios.get("/api/city", {
      params: { pname: ps.value },
    });
    const chtml = city
      .map((item) => `<option value="${item}">${item}</option>`)
      .join("");
    cs.innerHTML = `<option value="">--市--</option>${chtml}`;
  });
  cs.addEventListener("change", async () => {
    as.value = "";
    const { data: area } = await axios.get("/api/area", {
      params: { pname: ps.value, cname: cs.value },
    });
    const ahtml = area
      .map((item) => `<option value="${item}">${item}</option>`)
      .join("");
    as.innerHTML = `<option value="">--区--</option>${ahtml}`;
  });
};
initCity();

// 2. 添加学生
document.querySelector("#openModal").addEventListener("click", () => {
  modalBox.querySelector("form").reset();
  modalBox.querySelector(".modal-title").innerHTML = "添加学员";
  modalBox.dataset.id = "add";
  modal.show();
});
const form = modalBox.querySelector("form");
document.querySelector("#submit").addEventListener("click", async () => {
  const data = serialize(form, { hash: true });
  data.age = +data.age;
  data.hope_salary = +data.hope_salary;
  data.salary = +data.salary;
  data.gender = +data.gender;
  data.group = +data.group;
  if (modalBox.dataset.id !== "add") {
    try {
      await axios.put(`/students/${modalBox.dataset.id}`, data);
      modal.hide();
      renderList();
    } catch (error) {
      alert("修改失败");
    }
  } else {
    try {
      await axios.post("/students", data);
      modal.hide();
      renderList();
    } catch (error) {
      alert("添加失败");
    }
  }
});

// 3. 删除学生
document.querySelector(".list").addEventListener("click", async (e) => {
  const btn = e.target;
  if (btn.classList.contains("bi-trash")) {
    // 删除
    try {
      await axios.delete(`/students/${btn.dataset.id}`);
      renderList();
    } catch (error) {
      alert("删除失败");
    }
  }
  if (btn.classList.contains("bi-pen")) {
    // 编辑
    const { data: student } = await axios.get(`/students/${btn.dataset.id}`);
    const fields = modalBox.querySelectorAll("form [name]");
    Array.from(fields).forEach(async (item) => {
      if (item.name === "gender") {
        if (+item.value === student[item.name]) item.checked = true;
      } else {
        item.value = student[item.name];
      }
    });
    const { data: city } = await axios.get("/api/city", {
      params: { pname: ps.value },
    });
    const chtml = city
      .map((item) => `<option value="${item}">${item}</option>`)
      .join("");
    cs.innerHTML = `<option value="">--市--</option>${chtml}`;
    cs.value = student.city;
    const { data: area } = await axios.get("/api/area", {
      params: { pname: ps.value, cname: cs.value },
    });
    const ahtml = area
      .map((item) => `<option value="${item}">${item}</option>`)
      .join("");
    as.innerHTML = `<option value="">--区--</option>${ahtml}`;
    as.value = student.area;

    modalBox.querySelector(".modal-title").innerHTML = "修改学员";
    // 记录ID修改使用
    modalBox.dataset.id = student.id;
    modal.show();
  }
});
